@CHARSET "UTF-8";


body {
	font-family: Helvetica, Arial, Verdana, sans-serif;
}


a {
	text-decoration: none;
}
div {
	
}

div {
	//border:  1px solid black;
}

#test {

	width:50px
	height: 100px;
}


#logo {
	position: absolute;
}

#label {
	line-height: 20px;
	display: block;
}

#frontbkg {
	width: 960px;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	background-color: #9954a1;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}

#goback {
	color: white;
	font-size: 16px;
	margin-top: 200px;
	margin-left: 300px;
}

#thumbnailbkgContainer {
	position: absolute;
	margin-top:  40px;
	margin-left: 60px;
	width: 960px;
	height: 435px;
}
	
	

#thumbnails_l {
	float:  left;
	width: 260px;
	height: 435px;
	margin-right: 28px;
	background-color: #d83996;
	border: 3px solid #d83996;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

#thumbnails_bg {

	position:relative;
	display: table;
	width: 70%;
	height: 400px;
	margin-right:180px;
	margin-left:auto; 
	padding: 20px;
	background-color: #d83996;
	border: 3px solid black;
	border: 3px solid #d83996;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}



#thumbnails_c {
	float: left;
	width: 260px;
	height: 435px;
	margin-right: 28px;
	background-color: #d83996;
	border: 3px solid #d83996;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

#thumbnails_r {
	float: left;
	height: 435px;
	width: 260px;
	margin-right: 28px;
	background-color: #d83996;
	border: 3px solid #d83996;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


#startgamebkg {
	position: absolute;
	margin-top: 220px; 
	margin-left: 220px;
}

#errorbkg {
	position: absolute;
	margin-top: 100px; 
	margin-left: 220px;
}

#uploadimgbkg {
	
	float: left;
	width: 570px;
	height: 360px;
	margin-top: 60px;
	margin-left: 200px;
	
}

#startNewGameBtn{
	position: absolute;
	margin-top: 320px;
	margin-left: 280px;
}

#joinGameBtn{
	position: absolute;
	margin-top: 320px;
	margin-left: 498px;
}

#defaultimgbtn{
	position: absolute;
	margin-top: 385px;
	width: 230px;
	margin-top: 245px;
	margin-left: 500px;
}

#uploadText {
	position: absolute;
	width: 500px;
	height: 60px;
	font-size: 14px;
	margin-top:  110px;
	margin-left: 245px;
}

#imgExceedText {
	position: absolute;
	margin-top: -300px;
	margin-left: 280px;
	width: 450px;
	font-size: 16px;
}

#thumbimgbtn{
	position: absolute;
	width: 900px;
	margin-top: 48px;
	margin-left: 0px;
}

#thumnailbtn{
	float: left;
	width: 900px;
	height: 100px;
	margin-top: 650px;
	margin-left: 50px;

}


#main {
	width: 960px;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	background-color: #9954a1;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-image:url("../images/siteimages/grid.png");	
}

#header {
	width:  960px;
	height: 120px;
	margin-top: 0px;
	margin-left: 0px;
}


#loginForm {
	position:absolute;
	color: #FFF;
	line-height: 20px;
	font-size: 10px;
	margin-top: 455px;
	margin-left: 400px;
	width: 150px;
	height: 50px;
}



#imageContainer {
	position: absolute;
	margin-top:  44px;
	margin-left: 67px;
	width: 860px;
	height: 435px;
}


#footer {
	position: absolute;
	height: 60px;
	margin-top: 600px;
}

#registerheader {
	position:absolute;
	margin-top: 400px;

}

#registrationformbkg {
	position: absolute;
	margin-left: 250px;
	margin-top: -270px;


}

#frontTextLeft {
	position:absolute;
	color: #000;
	font-size: 14px;
	text-align: center;
	margin-top: 390px;
	margin-left: 90px;
	position: absolute;
	width: 130px;
	height: 50px;
}


#frontTextRight {
	position:absolute;
	color: #000;
	font-size: 14px;
	text-align: center;
	margin-top: 390px;
	margin-left: 720px;
	position: absolute;
	width: 125px;
	height: 50px;
}

#uploadform {
	position: absolute;
	margin-top: -180px;
	margin-left: 260px;
	margin-top: 205px;
	margin-left: 240px;
}

#dotLeft {
	position:absolute;
	width: 20px;
	height: 20px;
	margin-top: 450px;
	margin-left: 130px;
}

#dotRight{
	position:absolute;
	width: 20px;
	height: 20px;
	margin-top: 475px;
	margin-left: 755px;
}	

#instructions {
	position: absolute;
	width: 500px;
	height: 100px;
	margin-top: -140px;
	margin-left: 265px;
	padding: 20px
}

#choosenpictext {
	position: absolute;
	margin-top: -75px;
	margin-left: 327px;
	font-size: 14px;
}
	
#formheader {
	position: absolute;
	width: 150px;
	margin-top: -5px;
	margin-left: 5px;

}

#myImages{
	position:  absolute;
	float: left;
	width: 250px;
	height: 435px;	
}


#defaultImages {
	position:  absolute;
	float: left;
	margin-right: 44px;
	width: 250px;
	height: 435px;
}

#activeImages {
	float: left;
	margin-right: 45px;
	width: 250px;
	height: 435px;
	margin-top: 170px;
	margin-left: 60px;
}

.images {
	position:  relative;
	float: left;
}

.imgbox {
	margin: 3px;
	border: 1px solid black;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}



.whiteText {
	line-height: 15px;
	color: #FFF;
	font-size: 10px;
}

.lineSpace {
	line-height: 35px;
}

.alignCenter {
	text-align: center;
}

.errorLogin {
	position: absolute;
	color: #FFF;
	font-size: 10px;
	margin-left: 560px;
	margin-top: 483px
}

.logedIn {
	position: absolute;
	color: #FFF;
	font-size: 10px;
	margin-left: 850px;
	margin-top: 45px;
		
}

.logout {
	position: absolute;
	color: pink;
	font-size: 10px;
	margin-left: 850px;
	margin-top: 70px;
}	

#registrationbkg {
	position: absolute;
	margin-top: -300px;

}

#registrationbkg {
	position: absolute;
	margin-top: 120px;
	margin-left: 250px;


}

#registerForm {
	position: absolute;
	margin-top: 170px;
	margin-left: 320px;	
	color: #000;
	font-size: 10px;
	line-height: 20px;
}


.registerText {
	position: absolute;
	color: #FFF;
	font-size: 10px;
	margin-top: 200px;
	margin-left: 50px;	
}

.pinkText {
	color: deeppink;
}


#choosenpic2 {
	margin-top: -45px;
	margin-left: 170px;
}


.thumbHeader_l {
	position: absolute;
	margin-top: 20px;
	margin-left: 100px;
	font-size: 14px;
	font-weight: bold;
}

.thumbHeader_c {
	position: absolute;
	margin-top: 20px;
	margin-left: 410px;
	font-size: 14px;
	font-weight: bold;
}


.text {
	margin-left: ;
}


.thumbHeader_r {
	position: absolute;
	margin-top: 20px;
	margin-left: 720px;
	font-size: 14px;
	font-weight: bold;
}

#startgame {
	float: left;
	margin-top: 510px;
	margin-left: 100px;
}

#continue {
	//float: left;
	margin-left:42%;
	margin-right:42%;
	margin-top: 510px;
	//margin-left: 100px;
}

.uploadmorepics {
	margin-top: -45px;
	margin-left: 680px;
}

.home {
	margin-top: -43px;
	margin-left: 390px;
}

.homebutton {
	position: absolute;
	margin-top: 43px;
	margin-left: 790px;
}

#errortext {
	position: absolute;
	margin-top: 200px;
	margin-left: 340px;
	color: black;
}

#trash {
	position: absolute;
	margin-top: 485px;
	margin-left: 198px;


}



a.fancy_button, button.fancy_button { 
  background: #555; 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(77,77,77,0.2)));  
  background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(77,77,77,0.2)); 
  float: left; 
  padding: 4px; 
  text-decoration: none; 
  outline: 0; 
  border-width: 1px; 
  border-style: solid;
  width: auto;
  overflow: visible;
  border-color: transparent transparent #666 transparent; 
  border-color: transparent transparent rgba(202,202,202,0.27) transparent;
  -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
  -webkit-background-clip: padding-box;
}

a.fancy_button span, button.fancy_button span { 
  display: block; 
  float: left;
  letter-spacing: -1px; 
  border-width: 1px; 
  border-style: solid; 
  border-color: #ccc #444 #111 #444; 
  border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.5) rgba(0,0,0,0.7) rgba(0,0,0,0.5); 
  font: 16px/1em Arial;
  color: white; 
  padding: 0.48em 2em; 
  cursor: pointer; 
  text-shadow: rgba(0,0,0,0.45) 0 -1px 0; 
  -webkit-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: rgba(0,0,0,0.75) 0px 0px 3px; */
  -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; 
  background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6)), color-stop(0.5, rgba(255,255,255,0.15)), color-stop(0.5, rgba(255,255,255,0.01)), to(transparent)); 
  background: transparent -moz-linear-gradient(top, rgba(255,255,255,0.6), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.01) 50%, transparent);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr='#80FFFFFF', EndColorstr='#00FFFFFF'); 
  -webkit-background-clip: padding-box;
}

a.fancy_button:hover span, button.fancy_button:hover span {  
  border-top-color: rgba(255,255,255,0.65); 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.6)), color-stop(0.5, rgba(100,100,100,0.2)), color-stop(0.5, rgba(0,0,0,0.21)), to(rgba(0, 0, 0, 0.20))); 
  background: -moz-linear-gradient(top, rgba(220,220,220,0.6), rgba(100,100,100,0.2) 50%, rgba(0,0,0,0.21) 50%, rgba(0, 0, 0, 0.20));   */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#99dcdcdc', EndColorStr='#33000000'); 
  -webkit-background-clip: padding-box;
}

a.fancy_button:active span, button.fancy_button:active span {  
  border-top-color: rgba(255,255,255,0.2); 
  border-left-color: rgba(0,0,0,0.4); 
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(150,150,150,0.6)), color-stop(0.5, rgba(60,60,60,0.6)), color-stop(0.5, rgba(40,40,40,0.6)), to(rgba(20, 20, 20, 0.5))); 
  background: -moz-linear-gradient(top, rgba(150,150,150,0.6), rgba(60,60,60,0.6) 50%, rgba(40,40,40,0.6) 50%, rgba(20, 20, 20, 0.5));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#80969696', EndColorStr='#59000000'); 
  -webkit-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; -moz-box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; box-shadow: inset 0 0 18px rgba(0,0,0,0.75), rgba(0,0,0,0.75) 0px 0px 3px; 
  -webkit-background-clip: padding-box;
}

a.fancy_button span:active, button.fancy_button span:active { 
  border-top-color: rgba(255,255,255,0.2); 
  border-left-color: rgba(0,0,0,0.4); 
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#80969696', EndColorStr='#59000000'); 
  -webkit-background-clip: padding-box;
}

